<template>
    <div class="b-tabbar">
        <router-link
        v-for="route in navData"
        :key="route.name"
        :to ="route.path"
        tag="div"
        class="b-tabbar-item">
            <div class="icon">
                <i class="iconfont" v-html="route.icon"></i>
            </div>
            <div class="title">{{route.title}}</div>
        </router-link>
    </div>
</template>

<script>
import routes from '@/router/routes'
export default {
  name: 'tabbar',
  data () {
    return {
      navData: routes.filter(route => route.isTabbar === true)
    }
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 976663 */
  src: url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.eot');
  src: url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.woff') format('woff'),
  url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_976663_9b6s4hz71ji.svg#iconfont') format('svg');
}
.b-tabbar{
    height: 45px;
    border-top: 1px solid #dddddd;
    background-color: #f2f2f2;
    padding-top: 1vh; 
    display: flex;
    &-item {
        flex: 1;
        text-align: center;
        color: #4f545e;
        font-weight: 600;

        &.router-link-exact-active{
            color: #ff483e;
            .icon {
              .iconfont{
                  color: #ff483e;
                }
            }
        }

        >.icon{
            height: 28px;
          > .iconfont{
            font-family:  'iconfont';
            font-size: 24px;
            color: #bfbfbf;
          }
        }
        >.title{
            height: 18px;
            font-size: 12px;
        }
    }
}
</style>
